<template>
	<view style="padding: 30rpx;background-color: #fff;">
		<u-time-line style="margin-top: 20rpx;">
			<u-time-line-item nodeTop="2" v-for="(item, index ) in historyListData" :key="item.Id">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
				<template v-slot:node>
					<view class="u-node" :style="getTagColorText('color',item.State)">
						<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
					</view>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-title" style="margin-bottom: 20rpx;font-weight: bold;">
							{{ item.ActivityName }}
						</view>
						<view class="u-order-desc" style="margin-bottom: 20rpx;">{{item.ParticipantName}}</view>
						<view class="u-order-desc" style="margin-bottom: 20rpx;">审批意见: {{item.Comment}}</view>
						<view style="margin-bottom: 20rpx;">
							<uni-tag :mark="true" :text="getTagColorText('text',item.State)"
								:custom-style="getTagColorText('color',item.State)">
							</uni-tag>
						</view>
						<view class="u-order-time">{{ item.ModifiedTime ? item.ModifiedTime : item.CreatedTime}}</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>
	</view>
</template>

<script>
	import {
		// 获取日常报销单主表详情
		Reimburse_Daily_MainGetTheData,
		// 获取差旅报销单主表详情
		Reimburse_Travel_Business_MainGetTheData
	} from "@/api/interface.js";
	export default {
		data() {
			return {
				// 审批历史列表
				historyListData: [],
				options: {},
			}
		},
		onLoad(options) {
			if (options.ai_Workitems) {
				let historyListData = JSON.parse(options.ai_Workitems)
				console.log('详情过来--', historyListData)

				this.historyListData = historyListData
				// 处理日期格式化
				this.historyListData.forEach(item => {
					if (item.ModifiedTime) {
						item.ModifiedTime = this.$moment(item.ModifiedTime).format('YYYY-MM-DD HH:mm:ss')
					}
					if (item.CreatedTime) {
						item.CreatedTime = this.$moment(item.CreatedTime).format('YYYY-MM-DD HH:mm:ss')
					}
				})
			}
		},
		methods: {
			// 标签状态回调函数
			getTagColorText(key, state) {
				let color = ""
				let text = ""
				if (key === 'color') {
					if (state === 'Waiting') {
						color = "background-color: yellow"
					} else if (state === 'ToDo') {
						color = "background-color: red"
					} else if (state === 'UnRead') {
						color = "background-color: blue"
					} else if (state === 'Finished') {
						color = "background-color: #6CCD3D"
					} else if (state === 'Canceled') {
						color = "background-color: grey"
					} else if (state === 'Draft') {
						color = "background-color: #ADD3F5"
					} else if (state === 'Timeout') {
						color = "#ED5A17"
					} else if (state === 'Skiped') {
						color = "background-color: #866F6F"
					}
					return color
				} else {
					if (state === 'Waiting') {
						text = "等待"
					} else if (state === 'ToDo') {
						text = "待办"
					} else if (state === 'UnRead') {
						text = "待阅"
					} else if (state === 'Finished') {
						text = "已完成"
					} else if (state === 'Canceled') {
						text = "已取消"
					} else if (state === 'Draft') {
						text = "草稿"
					} else if (state === 'Timeout') {
						text = "超时"
					} else if (state === 'Skiped') {
						text = "跳过"
					}
					return text
				}
			},
		}

	}
</script>

<style lang="less" scoped>
	::v-deep.u-node {
		width: 20px !important;
		text-align: center !important;
		border-radius: 30px !important;
	}
</style>